import React, { useState, useEffect } from 'react'
import { 
  Card, Button, Space, Typography, Divider, Row, Col, 
  Progress, Statistic, Badge, Alert, Table, Tag, Avatar,
  Timeline, Steps, Tabs, Input, Select, DatePicker, Switch,
  Rate, Slider, Tooltip, Popover, Modal, notification
} from 'antd'
import { useSelector, useDispatch } from 'react-redux'
import { 
  BulbOutlined, BulbFilled, SettingOutlined, StarOutlined,
  UserOutlined, CalendarOutlined, ClockCircleOutlined,
  TrophyOutlined, RocketOutlined, HeartOutlined, ThunderboltOutlined,
  DashboardOutlined, BarChartOutlined
} from '@ant-design/icons'
import { RootState } from '@/store'
import { toggleTheme, setTheme } from '@/store/slices/themeSlice'
import './index.less'

const { Title, Paragraph, Text } = Typography
const { Option } = Select
const { Step } = Steps

// 模拟数据
const tableData = [
  { key: '1', name: '张三', age: 28, role: 'Frontend', status: 'active' },
  { key: '2', name: '李四', age: 32, role: 'Backend', status: 'active' },
  { key: '3', name: '王五', age: 25, role: 'Designer', status: 'inactive' },
  { key: '4', name: '赵六', age: 30, role: 'DevOps', status: 'active' },
]

const tableColumns = [
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '年龄', dataIndex: 'age', key: 'age' },
  { title: '角色', dataIndex: 'role', key: 'role' },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    render: (status: string) => (
      <Tag color={status === 'active' ? 'green' : 'orange'}>
        {status === 'active' ? '在线' : '离线'}
      </Tag>
    ),
  },
]

const ThemeDemo: React.FC = () => {
  const dispatch = useDispatch()
  const { currentTheme, themeConfig } = useSelector((state: RootState) => state.theme)
  const [progress, setProgress] = useState(0)
  const [activeTab, setActiveTab] = useState('1')

  // Tabs组件的items配置
  const tabItems = [
    {
      key: '1',
      label: '表格组件',
      children: (
        <Table 
          dataSource={tableData} 
          columns={tableColumns} 
          pagination={false}
          size="small"
        />
      )
    },
    {
      key: '2',
      label: '表单组件',
      children: (
        <Row gutter={[16, 16]}>
          <Col xs={24} md={12}>
            <Space direction="vertical" style={{ width: '100%' }}>
              <div>
                <Text>用户名：</Text>
                <Input placeholder="请输入用户名" style={{ marginTop: 4 }} />
              </div>
              <div>
                <Text>角色选择：</Text>
                <Select defaultValue="admin" style={{ width: '100%', marginTop: 4 }}>
                  <Option value="admin">管理员</Option>
                  <Option value="user">普通用户</Option>
                  <Option value="guest">访客</Option>
                </Select>
              </div>
              <div>
                <Text>生日：</Text>
                <DatePicker style={{ width: '100%', marginTop: 4 }} />
              </div>
            </Space>
          </Col>
          <Col xs={24} md={12}>
            <Space direction="vertical" style={{ width: '100%' }}>
              <div>
                <Text>接收通知：</Text>
                <Switch defaultChecked style={{ marginLeft: 8 }} />
              </div>
              <div>
                <Text>重要程度：</Text>
                <Rate defaultValue={3} style={{ display: 'block', marginTop: 4 }} />
              </div>
              <div>
                <Text>音量调节：</Text>
                <Slider defaultValue={30} style={{ marginTop: 8 }} />
              </div>
            </Space>
          </Col>
        </Row>
      )
    },
    {
      key: '3',
      label: '状态组件',
      children: (
        <Row gutter={[16, 16]}>
          <Col span={12}>
            <Space direction="vertical" style={{ width: '100%' }}>
              <Badge count={99} overflowCount={10}>
                <Avatar size="large" icon={<UserOutlined />} />
              </Badge>
              <Tag color="green">在线</Tag>
              <Tag color="orange">忙碌</Tag>
              <Tag color="red">离线</Tag>
            </Space>
          </Col>
          <Col span={12}>
            <Alert message="成功提示" type="success" closable />
            <Alert message="信息提示" type="info" closable style={{ marginTop: 8 }} />
            <Alert message="警告提示" type="warning" closable style={{ marginTop: 8 }} />
            <Alert message="错误提示" type="error" closable style={{ marginTop: 8 }} />
          </Col>
        </Row>
      )
    }
  ]

  // 进度条动画
  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((prev) => {
        if (prev >= 100) return 0
        return prev + 1
      })
    }, 100)
    return () => clearInterval(timer)
  }, [])

  const handleToggleTheme = () => {
    dispatch(toggleTheme())
    notification.success({
      message: '主题切换成功',
      description: `已切换到${currentTheme === 'light' ? '深色' : '浅色'}主题`,
      placement: 'topRight',
    })
  }

  const handleSetLightTheme = () => {
    dispatch(setTheme('light'))
  }

  const handleSetDarkTheme = () => {
    dispatch(setTheme('dark'))
  }

  return (
    <div className="theme-demo">
      {/* 头部区域 */}
      <Row align="middle" justify="space-between" className="theme-demo-header">
        <Col>
          <Title level={2} style={{ margin: 0 }}>
            <ThunderboltOutlined style={{ marginRight: 8, color: '#1890ff' }} />
            主题切换演示
          </Title>
          <Paragraph style={{ margin: '8px 0 0 0', fontSize: '16px' }}>
            体验现代化的主题切换功能，感受不同场景下的视觉效果
          </Paragraph>
        </Col>
        <Col>
          <Button 
            type="primary" 
            size="large"
            icon={currentTheme === 'light' ? <BulbFilled /> : <BulbOutlined />}
            onClick={handleToggleTheme}
            style={{ 
              background: currentTheme === 'light' ? '#faad14' : '#1890ff',
              borderColor: currentTheme === 'light' ? '#faad14' : '#1890ff'
            }}
          >
            {currentTheme === 'light' ? '切换到深色主题' : '切换到浅色主题'}
          </Button>
        </Col>
      </Row>

      {/* 统计信息区域 */}
      <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
        <Col xs={12} sm={6}>
          <Card>
            <Statistic
              title="系统运行天数"
              value={128}
              prefix={<RocketOutlined />}
              valueStyle={{ color: '#3f8600' }}
            />
          </Card>
        </Col>
        <Col xs={12} sm={6}>
          <Card>
            <Statistic
              title="主题切换次数"
              value={1234}
              prefix={<BulbOutlined />}
              valueStyle={{ color: '#1890ff' }}
            />
          </Card>
        </Col>
        <Col xs={12} sm={6}>
          <Card>
            <Statistic
              title="在线用户"
              value={56}
              prefix={<UserOutlined />}
              valueStyle={{ color: '#cf1322' }}
            />
          </Card>
        </Col>
        <Col xs={12} sm={6}>
          <Card>
            <Statistic
              title="性能评分"
              value={98.5}
              suffix="%"
              prefix={<TrophyOutlined />}
              valueStyle={{ color: '#faad14' }}
            />
          </Card>
        </Col>
      </Row>

      {/* 主要内容区域 */}
      <Row gutter={[16, 16]}>
        {/* 左侧内容 */}
        <Col xs={24} lg={16}>
          {/* 主题状态和操作 */}
          <Card title="主题控制面板" style={{ marginBottom: 16 }}>
            <Row gutter={[16, 16]}>
              <Col xs={24} md={12}>
                <Alert
                  message={`当前主题：${currentTheme === 'light' ? '浅色模式' : '深色模式'}`}
                  description={
                    <div>
                      <p>主色调：<Text code>{themeConfig.primaryColor}</Text></p>
                      <p>背景色：<Text code>{themeConfig.backgroundColor}</Text></p>
                      <p>文字色：<Text code>{themeConfig.textColor}</Text></p>
                    </div>
                  }
                  type={currentTheme === 'light' ? 'info' : 'warning'}
                  showIcon
                  style={{ marginBottom: 16 }}
                />
                
                <Space direction="vertical" style={{ width: '100%' }}>
                  <Button 
                    onClick={handleSetLightTheme}
                    disabled={currentTheme === 'light'}
                    block
                    icon={<BulbOutlined />}
                  >
                    浅色主题
                  </Button>
                  <Button 
                    onClick={handleSetDarkTheme}
                    disabled={currentTheme === 'dark'}
                    block
                    icon={<BulbFilled />}
                  >
                    深色主题
                  </Button>
                </Space>
              </Col>
              
              <Col xs={24} md={12}>
                <div style={{ marginBottom: 16 }}>
                  <Text strong>系统性能监控</Text>
                  <Progress 
                    percent={progress} 
                    status="active" 
                    strokeColor={{
                      '0%': '#108ee9',
                      '100%': '#87d068',
                    }}
                    style={{ margin: '8px 0' }}
                  />
                  <Text type="secondary">实时更新中...</Text>
                </div>
                
                <div>
                  <Text strong>用户体验评分</Text>
                  <div style={{ margin: '8px 0' }}>
                    <Rate allowHalf value={4.5} />
                    <Text style={{ marginLeft: 8 }}>4.5/5.0</Text>
                  </div>
                  <Slider 
                    value={85} 
                    disabled 
                    marks={{
                      0: '差',
                      50: '一般',
                      100: '优秀'
                    }}
                  />
                </div>
              </Col>
            </Row>
          </Card>

          {/* 组件展示区域 */}
          <Card title="UI组件展示">
            <Tabs 
              activeKey={activeTab} 
              onChange={setActiveTab}
              items={tabItems}
            />
          </Card>
        </Col>

        {/* 右侧内容 */}
        <Col xs={24} lg={8}>
          {/* 时间线 */}
          <Card title="系统日志" style={{ marginBottom: 16 }}>
            <Timeline>
              <Timeline.Item color="green">
                <p>系统启动完成</p>
                <p style={{ color: '#999', fontSize: '12px' }}>2024-01-15 09:00:00</p>
              </Timeline.Item>
              <Timeline.Item color="blue">
                <p>用户登录系统</p>
                <p style={{ color: '#999', fontSize: '12px' }}>2024-01-15 09:15:30</p>
              </Timeline.Item>
              <Timeline.Item color="orange">
                <p>主题切换为深色模式</p>
                <p style={{ color: '#999', fontSize: '12px' }}>2024-01-15 10:30:45</p>
              </Timeline.Item>
              <Timeline.Item>
                <p>数据备份完成</p>
                <p style={{ color: '#999', fontSize: '12px' }}>2024-01-15 11:45:20</p>
              </Timeline.Item>
            </Timeline>
          </Card>

          {/* 操作步骤 */}
          <Card title="快速入门">
            <Steps direction="vertical" size="small" current={2}>
              <Step title="注册账户" description="创建您的专属账户" icon={<UserOutlined />} />
              <Step title="选择主题" description="根据偏好选择界面主题" icon={<BulbOutlined />} />
              <Step title="个性化设置" description="配置个人偏好设置" icon={<SettingOutlined />} />
              <Step title="开始使用" description="享受完整的系统功能" icon={<RocketOutlined />} />
            </Steps>
          </Card>
        </Col>
      </Row>

      {/* 底部特性说明 */}
      <Card title="主题特性对比" style={{ marginTop: 16 }}>
        <Row gutter={[16, 16]}>
          <Col xs={24} md={12}>
            <Card type="inner" title="🌞 浅色主题" extra={<StarOutlined style={{ color: '#faad14' }} />}>
              <ul style={{ margin: 0, paddingLeft: 20 }}>
                <li>清爽明亮的视觉体验</li>
                <li>高对比度，适合阅读</li>
                <li>经典专业的商务风格</li>
                <li>白天办公的理想选择</li>
                <li>降低夜间使用的眼部疲劳</li>
              </ul>
              <Divider />
              <Text strong>推荐场景：</Text>
              <div style={{ marginTop: 8 }}>
                <Tag>办公环境</Tag>
                <Tag>数据分析</Tag>
                <Tag>文档编辑</Tag>
              </div>
            </Card>
          </Col>
          
          <Col xs={24} md={12}>
            <Card type="inner" title="🌙 深色主题" extra={<HeartOutlined style={{ color: '#1890ff' }} />}>
              <ul style={{ margin: 0, paddingLeft: 20 }}>
                <li>时尚酷炫的现代设计</li>
                <li>护眼舒适，减少蓝光</li>
                <li>节能环保，延长电池</li>
                <li>夜间工作的完美伴侣</li>
                <li>专注编程的开发环境</li>
              </ul>
              <Divider />
              <Text strong>推荐场景：</Text>
              <div style={{ marginTop: 8 }}>
                <Tag>夜间工作</Tag>
                <Tag>代码开发</Tag>
                <Tag>创意设计</Tag>
              </div>
            </Card>
          </Col>
        </Row>
      </Card>
    </div>
  )
}

export default ThemeDemo 